/*
 * @Author: your name
 * @Date: 2021-12-28 10:43:51
 * @LastEditTime: 2021-12-28 14:59:58
 * @LastEditors: LAPTOP-L472H14P
 * @Description: In User Settings Edit
 * @FilePath: \react-dnd-demo\src\Components\CardDrop\Card.js
 */
import React, { Component } from 'react'
import { Card } from 'antd'
import 'antd/dist/antd.css'
import { flow } from 'lodash'
import { DragSource, DropTarget } from 'react-dnd'
const type = Symbol('card')
const specSource = {
  beginDrag(props, monitor) {
    return props.item
  },
}
const specSourceCollect = (connect) => {
  return {
    myconnect: connect.dragSource(),
  }
}
const specTarget = {
  drop(props, monitor) {
      const id = monitor.getItem().id;
      const {id:TargetId} = props.item;
      props.setPosition(id,TargetId);
  },
}
const specTargetCollect = (connect) => {
  return {
    myDropTarget: connect.dropTarget(),
  }
}
class CardDropItem extends Component {
  render() {
    const { item, myconnect, myDropTarget } = this.props
    console.log(this.props)
    return myconnect(
      myDropTarget(
        <div>
          <Card style={{ width: 300, margin: 10 }} bordered title={item.title}>
            {item.bodyContent}
          </Card>
        </div>,
      ),
    )
  }
}
export default flow(
  DragSource(type, specSource, specSourceCollect),
  DropTarget(type, specTarget, specTargetCollect),
)(CardDropItem)
